;(function($){
    "use strict";
    // console.log($);
    $.fn.banner = function(ops){
        // console.log(this);
        // 处理参数
        ops = ops || {};
        let {imgItem,btns=true,list=true,autoPlay=true,delayTime=3000,moveTime=200,index=0} = ops;
        // 测试参数的处理
        // console.log(imgItem);
        // console.log(btns);
        // console.log(list);
        // console.log(autoPlay);
        // console.log(delayTime);
        // console.log(moveTime);
        // console.log(index);
        
        const LOCAL = {imgItem,btns,list,autoPlay,delayTime,moveTime,index};
        // console.log(LOCAL)

        const that = this;

        // 提前假设的要走的图片的索引
        LOCAL.prev = null;

        // 1. 渲染图片
        let str = "";
        LOCAL.imgItem.forEach(val => {
            str += `<a href="##"><img src="${val.url}" title="${val.title}" alt="${val.alt}"></a>`;
        });
        $(`<div class="imgbox">`).html(str).appendTo(this).css({
            width:"100%",
            height:"100%",
            position:"relative"
        }).children("a").css({
            width:"100%",
            height:"100%",
            position:"absolute",
            left:"100%"
        }).eq(LOCAL.index).css({
            left:0
        }).end().children("img").css({
            width:"100%",
            height:"100%"
        });

        // 将右按钮的事件处理函数单独封装,为了自动轮播时,使用
        LOCAL.rightClick = function(){
            if(LOCAL.index === LOCAL.imgItem.length-1){
                LOCAL.index = 0;
                LOCAL.prev = LOCAL.imgItem.length-1;
            }else{
                LOCAL.index++;
                LOCAL.prev = LOCAL.index-1;
            }
            // console.log(LOCAL.prev, LOCAL.index)
            LOCAL.btnMove(1)
        }
        LOCAL.btnMove = function(d){
            // 根据传入的方向，实现动画
            that.children(".imgbox").children("a").eq(LOCAL.prev).css({
                left:0
            }).stop().animate({
                left:-100 * d + "%"
            }).end().eq(LOCAL.index).css({
                left:100 * d + "%"
            }).stop().animate({
                left:0
            })
            // 为了效果更完善，点击左右按钮时，如果有list，那么也根据当前索引，切换list的当前项
            if(!LOCAL.list) return;
            that.children(".list").children("li").eq(LOCAL.index).css({
                background:"rgba(255,0,0,0.6)"
            }).siblings().css({
                background:"rgba(255,255,255,0.6)"
            })
        }

        // 2.根据条件，渲染按钮，并添加功能
        if(LOCAL.btns){
            // 创建按钮的容器
            let btnBox = $(`<div class="btns">`).css({
                width:"100%",
                position:"absolute",
                left:0,top:0
            }).appendTo(this);

            // 创建左按钮，并绑定点击事件
            $(`<span class="left">&lt;</span>`).appendTo(btnBox).css({
                left:0
            }).click(function(){
                // 提前准备要走的图片的索引，计算要走的图片的索引，计算要进来的图片的索引
                if(LOCAL.index === 0){
                    LOCAL.index = LOCAL.imgItem.length-1;
                    LOCAL.prev = 0;
                }else{
                    LOCAL.index--;
                    LOCAL.prev = LOCAL.index+1;
                }
                // console.log(LOCAL.prev, LOCAL.index)
                // 调用运动，传入方向
                LOCAL.btnMove(-1)
            });
            
            $(`<span class="right">&gt;</span>`).appendTo(btnBox).css({
                right:0
            }).click(LOCAL.rightClick)

            // 设置按钮的公共样式
            btnBox.children("span").css({
                position:"absolute",
                width:40,height:40,
                background:"rgba(255,255,255,0.6)",
                lineHeight:"40px",
                top:230,
                textAlign:"center",
                cursor: "pointer"
            }).hover(function(){
                $(this).css({
                    background:"rgba(255,0,0,0.6)"
                })
            },function(){
                $(this).css({
                    background:"rgba(255,255,255,0.6)"
                })
            });
        }
        
        // 3.根据条件，渲染下标按钮，并添加功能
        if(LOCAL.list){
            // 创建list容器
            let list = $(`<ul class="list">`);
            LOCAL.imgItem.forEach((val,idx)=>{
                list.append(`<li>${idx+1}</li>`);
            })
            // 创建每个list
            list.appendTo(this).css({
                width:"100%",
                position:"absolute",
                left:0,bottom:0,
                background:"rgba(255,255,255,0.6)",
                display:"flex",
                lineHeight:"30px",
                textAlign:"center"
            }).children("li").css({
                flex:1,
                borderLeft:"solid 1px #fff",
                borderRight:"solid 1px #fff"
            }).eq(LOCAL.index).css({
                background:"rgba(255,0,0,0.6)"
            }).end().click(function(){
                // console.log($(this).index())
                if($(this).index() < LOCAL.index){
                    // 走 LOCAL.index
                    // 进来 $(this).index()
                    // 实现动画，记得封装
                    that.children(".imgbox").children("a").eq(LOCAL.index).css({
                        left:0
                    }).stop().animate({
                        left:-100 + "%"
                    }).end().eq($(this).index()).css({
                        left:100 + "%"
                    }).stop().animate({
                        left:0
                    })
                }
                if($(this).index() > LOCAL.index){
                    that.children(".imgbox").children("a").eq(LOCAL.index).css({
                        left:0
                    }).stop().animate({
                        left:100 + "%"
                    }).end().eq($(this).index()).css({
                        left:-100 + "%"
                    }).stop().animate({
                        left:0
                    })
                }

                // 切换图片之后，记得更新list的当前项
                $(this).css({
                    background:"rgba(255,0,0,0.6)"
                }).siblings().css({
                    background:"rgba(255,255,255,0.6)"
                })

                // 点击之后，将点击的索引设置为当前索引
                LOCAL.index = $(this).index();
            });
        }

        // 4.根据条件，自动播放
        if(LOCAL.autoPlay){
            // 开启计时器
            LOCAL.t = setInterval(() => {
                // 计时器每次执行右按钮的事件处理函数
                LOCAL.rightClick();
            }, LOCAL.delayTime);

            this.hover(function(){
                clearInterval(LOCAL.t)
            },function(){
                LOCAL.t = setInterval(() => {
                    LOCAL.rightClick();
                }, LOCAL.delayTime);
            })
        }
    }
})(jQuery);

